<template>
  <div class="user-manage">
    全部篝火
    <div class="select-button">
      <el-row>
        <el-col :span="24">
          <el-row :gutter="20">
            <el-col :span="10">
              <el-input @change="pageProblem" v-model="inputProblemDescription" placeholder="请输入题目描述"></el-input>
            </el-col>
            <el-col :span="3" :offset="6">
              <el-button type="primary" @click="beginAddProblem">添加题目</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <div class="course-list">
      <el-table
        :data="problems"
        border
        style="width: 100%">
        <el-table-column fixed prop="id" label="题目ID" min-width="40%" align="center">
        </el-table-column>
        <el-table-column prop="description" label="题目描述" min-width="40%" align="center">
        </el-table-column>
        <el-table-column prop="source" label="题目来源" min-width="40%" align="center">
        </el-table-column>
        <el-table-column prop="userName" label="创建者" min-width="40%" align="center">
        </el-table-column>
        <el-table-column prop="isPublic" label="是否开放" min-width="40%" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isPublic == 1"
              disabled>
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="类型" align="center" fixed="right" width="200">
          <template slot-scope="scope">
            <span>{{ problemType[scope.row.type] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="200">
          <template slot-scope="scope">
            <el-button @click="beginEditProblem(scope.row.id)" type="text" size="middle">编辑</el-button>
            <!--            <el-button type="text" size="middle">解散</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 20px;display: flex;flex-direction: row;justify-content: center">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[8, 10, 20, 40]"
          :page-size="8"
          layout="total, sizes, prev, pager, next, jumper"
          :total="parseInt(total)">
        </el-pagination>
      </div>
    </div>
    <el-dialog title="题目编辑" :visible.sync="problemEditVisible">
      <el-form ref="form" label-width="80px">
        <el-form-item label="题目id" style="width: 600px;" v-if="problem.id">
          <el-input v-model="problem.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="题目类型" style="width: 630px;">
          <el-select v-model="problem.type" placeholder="题目类型">
            <el-option value="0" label="单选题"></el-option>
            <el-option value="1" label="多选题"></el-option>
            <el-option value="2" label="填空题"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题目描述" style="width: 600px;">
          <el-input v-model="problem.description"></el-input>
        </el-form-item>
        <el-form-item label="题目选项" v-if="problem.type && problem.type != 2" style="width: 600px;">
          <el-button type="primary" @click="addOption()">添加选项</el-button>
          <div v-for="(option,index) in problem.options">
            <div
              style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;background-color: #efefef;height: 60px;border-radius: 10px;margin-top: 10px">
              <el-form-item label="选项内容" style="width: 600px;margin-bottom: 0">
                <el-input v-model="option.content"></el-input>
              </el-form-item>
              <div style="width: 400px;justify-content: flex-end;flex-direction: row;display: flex;margin-right: 20px">
                <el-button @click="removeOption(index)" type="danger">删除</el-button>
              </div>
            </div>
          </div>
        </el-form-item>



        <el-form-item label="正确答案" v-if="problem.type && problem.type == 0" style="width: 600px;">
          <el-select v-model="problem.answer" value-key="content" filterable placeholder="请输入关键词" style="width: 600px">
            <el-option v-for="(item,index) in problem.options" :key="item.content" :label="item.content" :value="index"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="正确答案" v-if="problem.type && problem.type == 1" style="width: 600px;">
          <el-select v-model="problem.answer" value-key="content" multiple filterable placeholder="请输入关键词" style="width: 600px">
            <el-option v-for="(item,optionIndex) in problem.options" :key="item.content" :label="item.content" :value="optionIndex"></el-option>
          </el-select>
        </el-form-item>




        <el-form-item label="正确答案" v-if="problem.type && problem.type == 2" style="width: 800px;">

          <el-button type="primary" @click="addAnswer">添加答案</el-button>
          <div v-for="(answer,answerIndex) in answers">
            <el-button type="primary" @click="addAnswerOption(answerIndex)" style="margin-top: 20px">添加填空答案</el-button>
            <div v-for="(option,index) in answer.options">
              <div
                style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;background-color: #efefef;height: 60px;border-radius: 10px;margin-top: 10px">
                <el-form-item label="答案内容" style="width: 600px;margin-bottom: 0">
                  <el-input v-model="option.content"></el-input>
                </el-form-item>
                <el-form-item v-if="answerIndex == 0" label="权重(共10)" style="width: 600px;margin-bottom: 0">
                  <el-input v-model="option.score"></el-input>
                </el-form-item>
                <div
                  style="width: 400px;justify-content: flex-end;flex-direction: row;display: flex;margin-right: 20px">
                  <el-button @click="removeAnswerOption(answerIndex,index)" type="danger">删除</el-button>
                </div>
              </div>
            </div>
          </div>
        </el-form-item>

        <div
          style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-top: 20px;width: 60%;margin-left: 20%">
          <el-button @click="problemEditVisible = false">取消</el-button>
          <el-button type="primary" @click="saveOrUpdateProblem()">保存</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "CourseManage",
  data() {
    return {
      problemEditVisible: false,
      loading: false,


      inputProblemDescription: '',

      currentSize: 8,
      currentPage: 1,
      total: 0,
      problems:[],


      problemType: ["单选题", "多选题", "简答题"],
      problem: {},
      answers:[]
    }
  },
  mounted() {
    console.log("啦啦啦")
    this.pageProblem()
  },
  methods: {
    pageProblem() {
      this.$api.pageProblem({
        pageSize: this.currentSize,
        pageNow: this.currentPage,
        description: this.inputProblemDescription || '',
      })
        .then((res) => {
          this.total = res.data.totalPage
          this.problems = res.data.rows;
          this.loading = false;
        });
    },
    handleSizeChange(val) {
      this.currentSize = parseInt(val);
      this.pageProblem();
    },
    handleCurrentChange(val) {
      this.currentPage = parseInt(val);
      this.pageProblem();
    },




    beginEditProblem(problemId) {
      this.$api.getProblemInfo({problemId})
        .then(res => {
          let problem = res.data
          this.problem = problem
          if(problem.type === 2){
            let answerStrings = JSON.parse(res.data.answer)
            console.log("解析",answerStrings)
            let answers = []
            for (let i = 0; i < answerStrings.length; i++) {
              let answersContents = answerStrings[i].split(",")
              answers[i]={
                options:[]
              }
              for (let j = 0; j < answersContents.length; j++){
                answers[i].options.push({
                  content:answersContents[j],
                  score:problem.options[j]
                })
              }
            }
            this.answers = answers
            console.log("答案",this.answers)
          }else {
            let options = []
            for (let i = 0; i < res.data.options.length; i++) {
              options.push({
                content: res.data.options[i]
              })
            }
            this.problem.options = options

            if(problem.type === 0){
              let answerString = parseInt(this.problem.answer).toString(2);
              console.log("二进制答案",answerString)
              for (let i = 0; i < answerString.length; i++) {
                if(answerString[i] === "1"){
                  this.problem.answer = i
                }
              }
            }else {
              let answer = []
              let answerString = parseInt(this.problem.answer).toString();
              for (let i = 0; i < answerString.length; i++) {
                if(answerString[i] === "1"){
                  answer.push(i)
                }
              }
              this.problem.answer = answer
            }
          }
        })
      console.log(this.problem)
      this.problemEditVisible = true
      this.$forceUpdate()
    },
    beginAddProblem() {
      this.problem = {
        description: "",
        options: [],
        id: null,
        answer: ""
      }
      this.problemEditVisible = true
    },






    // 保存并获取题目信息
    saveOrUpdateProblem() {
      console.log("执行",this.problem.answer)
      let answer = ""
      let options = []
      if (this.problem.type === 2) {
        answer = []
        // 填空题
        for (let i = 0; i < this.answers.length; i++) {
          let answerTemp = ""
          for (let j = 0; j < this.answers[i].options.length; j++) {
            answerTemp = answerTemp  + this.answers[i].options[j].content+ ","
          }
          answer.push(answerTemp.slice(0,answerTemp.length-1))
        }
        for (let j = 0; j < this.answers[0].options.length; j++) {
          options.push(this.answers[0].options[j].score)
        }
        this.problem.options = options
        this.problem.answer = JSON.stringify(answer)
      } else {
        for (let i = 0; i < this.problem.options.length; i++) {
          console.log("执行",this.problem.answer,i)
          if ((this.problem.type === 0 && this.problem.answer === i) || (this.problem.type === 1 && this.problem.answer.includes(i))) {
            answer = answer + "1"
          } else {
            answer = answer + "0"
          }
          options.push(this.problem.options[i].content)
        }
        this.problem.answer = parseInt(answer, 2);
        this.problem.options = options
      }

      console.log(this.problem)

      this.$api.saveOrUpdateProblem(this.problem)
        .then(res => {
          this.$message.success("成功" + res.data)
          this.pageProblem()
          this.problemEditVisible = false
        })
    },

    /** 选择题相关操作 **/
    // 增加题目选项
    addOption() {
      if (!this.problem.options) {
        this.problem.options = []
      }
      this.problem.options.push({
        content: ""
      })
    },

    // 移除题目选项
    removeOption(index) {
      this.problem.options.splice(index, 1)
    },



    /** 填空题相关操作 **/
    // 增加填空题答案
    addAnswer() {
      this.answers.push({
        options: []
      })
      this.$forceUpdate()
    },

    // 增加题目选项
    addAnswerOption(answerIndex) {
      this.answers[answerIndex].options.push({
        content: ""
      })
      this.$forceUpdate()
    },

    // 移除题目选项
    removeAnswerOption(answerIndex, index) {
      this.answers[answerIndex].options.splice(index, 1)
      this.$forceUpdate()
    },


  },
}
</script>

<style scoped>

.course-manage {
  width: 94%;
  margin-left: 3%;
}

.head {
  padding-bottom: 10px;
}

.select-button {
  padding: 10px 0;
}

.course-list {
  padding: 10px 0;
}
</style>
